<!--卡券详情-->
<template>
  <div class="storePromotion">
    <div class="spinner" v-if="$store.state.loadingFlag">
      <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
    </div>
    <el-row class="top bgcolor1 font_size3 font_color1">
        <el-col :span="24">
          <span>卡券列表</span>
          <span v-if="carData.cardTypeCode==2">查看代金券</span>
          <span v-if="carData.cardTypeCode==3">查看折扣券</span>
          <span v-if="carData.cardTypeCode==5">查看普通券</span>
        </el-col>
      </el-row>
    <div v-if="flag">
      <div class="content bgcolor1">
        <el-row class="detail-item">
          <el-col :span="2" class="label">券名称:</el-col>
          <el-col :span="22" class="d-right">{{carData.title}}</el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="2" class="label">总库存:</el-col>
          <el-col :span="22" class="d-right">{{totalQuantity}}张</el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="2" class="label">剩余库存:</el-col>
          <el-col :span="22" class="d-right">{{carData.quantity}}张</el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="2" class="label">每人限领:</el-col>
          <el-col :span="22" class="d-right">{{carData.getLimit}}张</el-col>
        </el-row>
        <el-row class="detail-item" v-if="carData.cardTypeCode==2">
          <el-col :span="2" class="label">券面值:</el-col>
          <el-col :span="22" class="d-right" >{{Number(carData.reduceCost)/100}}元</el-col>
        </el-row>
        <el-row class="detail-item" v-if="carData.cardTypeCode==3">
          <el-col :span="2" class="label">折扣率:</el-col>
          <el-col :span="22" class="d-right" >{{(100-Number(carData.discount))/10}}折</el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="2" class="label">券描述:</el-col>
          <el-col :span="22" class="d-right">{{carData.notice}}</el-col>
        </el-row>
        <el-row class="detail-item" v-if="carData.useOnMerchantId">
          <el-col :span="2" class="label">关联的商户:</el-col>
          <el-col :span="22" class="d-right">{{carData.useOnMerchantName}}</el-col>
        </el-row>
        <el-row class="detail-item" v-if="carData.cardTypeCode==2">
          <el-col :span="2" class="label">使用限制:</el-col>
          <el-col :span="22" class="d-right">满{{(100-Number(carData.leastCost))/100}}元可用</el-col>
        </el-row>
        <!--<el-row class="detail-item">-->
        <!--<el-col :span="2" class="label">操作提醒:</el-col>-->
        <!--<el-col :span="22" class="d-right">{{carData.notice}}</el-col>-->
        <!--</el-row>-->
        <el-row class="detail-item validityTime">
          <el-col :span="2" class="label">有效期:</el-col>
          <el-col :span="22" class="d-right">
            <span class="r-time">{{timeStart}}&nbsp;至&nbsp;{{timeEnd}}</span>
            <span class="r-part" v-if="limitTime.length">{{limitStr}}{{limitTime}}可用</span>
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="2" class="label">使用说明:</el-col>
          <el-col :span="22" class="d-right" style="padding-right: 50px;">{{carData.description}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="22" :offset="2" class="btn">
            <el-button class="comfirmBtn" @click="$router.push({path: `/cardCouponsList`})">返回</el-button>
            <!--<el-button class="comfirmBtn">保存</el-button>-->
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data(){
      return {
        carData:"",
        timeStart:"",
        timeEnd:"",
        limitList:[],
        limitStr:"",
        limitTime:"",
        flag:false,
        totalQuantity:""
      }
    },
    methods: {

    },
    created(){
      this.totalQuantity=localStorage.getItem('totalQuantity')
      this.$store.state.loadingFlag = true
      this.$http.get(`${this.$store.state.path}cards/card?communityId=${this.$store.state.storeId}&cardId=${this.$route.params.cardId}`)
        .then(res => {
          this.$store.state.loadingFlag = false
          this.flag = true
          console.log(res.body)
          if (res.body.resultCode=='0000'){
            this.carData =res.body.result
            this.timeStart = this.Time1(this.carData.dateInfo.split('-')[0])
            this.timeEnd = this.Time1(this.carData.dateInfo.split('-')[1])
           if(this.carData.timeLimitVOList.length){
             for (let i = 0; i < this.carData.timeLimitVOList.length; i++) {
               if (this.carData.timeLimitVOList[i].type == "MONDAY")  this.limitList.push("周一")
               if (this.carData.timeLimitVOList[i].type == "TUESDAY")  this.limitList.push("周二")
               if (this.carData.timeLimitVOList[i].type == "WEDNESDAY")  this.limitList.push("周三")
               if (this.carData.timeLimitVOList[i].type == "THURSDAY")  this.limitList.push("周四")
               if (this.carData.timeLimitVOList[i].type == "FRIDAY")  this.limitList.push("周五")
               if (this.carData.timeLimitVOList[i].type == "SATURDAY")  this.limitList.push("周六")
               if (this.carData.timeLimitVOList[i].type == "SUNDAY")  this.limitList.push("周日")
             }
             this.limitStr = this.limitList.join(",");
             let bH,eH,bH1,bH2
             if((this.carData.timeLimitVOList[0].beginHour+"").length==2) bH = this.carData.timeLimitVOList[0].beginHour+""
             if((this.carData.timeLimitVOList[0].beginMinute+"").length==2) eH = this.carData.timeLimitVOList[0].beginMinute+""
             if((this.carData.timeLimitVOList[0].endHour+"").length==2) bH1 = this.carData.timeLimitVOList[0].endHour+""
             if((this.carData.timeLimitVOList[0].endMinute+"").length==2) bH2 = this.carData.timeLimitVOList[0].endMinute+""
             console.log(bH+eH+":"+bH1+bH2)
             if((this.carData.timeLimitVOList[0].beginHour+"").length==1)bH = `0${this.carData.timeLimitVOList[0].beginHour}`
             if((this.carData.timeLimitVOList[0].beginMinute+"").length==1)eH = `0${this.carData.timeLimitVOList[0].beginMinute}`
             if((this.carData.timeLimitVOList[0].endHour+"").length==1)bH1 =`0${this.carData.timeLimitVOList[0].endHour}`
             if((this.carData.timeLimitVOList[0].endMinute+"").length==1)bH2 = `0${this.carData.timeLimitVOList[0].endMinute}`
             console.log(bH+eH+":"+bH1+bH2)
             this.limitTime = `${bH}:${eH}-${bH1}:${bH2}`
             console.log(this.limitTime)
            }
          }
        }, res => {

        })
    }
  }
</script>
<style scoped>
  .font_color1{
    color:#597380;
  }
  .font_size3{
    font-size:18px;
  }
  .bgcolor1{
    background-color:#fff;
  }
  .storePromotion{
    font-family:MicrosoftYaHei;
    padding-left:200px;
    background-color:#F5F5F5;
  }
  .storePromotion .top{
    height:70px;
    line-height:70px;
  }
  .storePromotion .top span:first-child{
    display:inline-block;
    width:150px;
    height:100%;
    line-height:70px;
    text-align:center;
    border-right:1px solid #D7D9DD;
  }
  .storePromotion .top span:last-child{
    display:inline-block;
    /*border:1px solid blue;*/
    margin-left:27px;
  }
  .storePromotion .content{
    margin:36px 23px 356px 22px;
    height:589px;
    padding:40px 0 0 143px;
    border-top-left-radius:5px;
    border-bottom-right-radius:5px;
  }
  .storePromotion .content .detail-item{
    color:#597380;
    font-size:14px;
    margin-bottom:33px;
  }
  .storePromotion .content .detail-item .label{
    /*border:1px solid red;*/
    text-align:right;
  }
  .storePromotion .content .detail-item .d-right{
    /*border:1px solid blue;*/
    padding-left:37px;
  }
  .storePromotion .content  .validityTime .d-right .r-part{
    display:inline-block;
    margin-left:48px;
  }
  .storePromotion .content .btn{
    /*border:1px solid red;*/
    padding-left:37px;
    margin-top:20px;
  }

</style>
